<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="icon"
    href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text x=%22-.1em%22 y=%22.875em%22 font-size=%2290%22>✅</text></svg>" />
  <title>To-Do List</title>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
  <style>
    .line-through {
      text-decoration: line-through;
      opacity: 0.7;
    }

    .container {
      background: white;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      width: 100%;
      max-width: 500px;
    }

    .input-group {
      display: flex;
      gap: 8px;
      margin-bottom: 1rem;
    }

    .filter-controls {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0rem;
      padding: 0.5rem;
      background: #f8f9fa;
      border-radius: 12px;
    }

    .filter-btn {
      padding: 8px 16px;
      background: transparent;
      color: #646464;
      font-size: 0.9rem;
      border-radius: 8px;
      transition: all 0.2s ease;
    }

    .filter-btn:hover {
      background: #ddd;
      transform: none;
    }

    .filter-btn.active {
      background: #646464;
      color: white;
    }
    .empty-state {
      text-align: center;
      margin-top: 2rem;
    }

    .task {
      margin-bottom: 8px;
      padding-block: 2px;
      background: #f8f8f8;
      border-radius: 8px;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
    }

    .task-text {
      line-height: 1.5;
    }

    .task-text li::before {
      content: "•";
      color: #646464;
      display: inline-block;
      width: 1em;
      margin-left: -1em;
    }

    .delete-btn {
      font-size: 12px;
      background: none;
      padding: 2px;
      width: 24px;
      height: 24px;
      user-select: none;
      -webkit-user-select: none;
    }

    .delete-btn:hover {
      background: none;
      transform: scale(1.2);
    }

    body {
      font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
      line-height: 1.6;
      letter-spacing: -0.01em;
      background: #f5f5f5;
      display: flex;
      justify-content: center;
      padding: 2rem;
    }

    a {
      color: #646464;
      font-weight: 500;
      transition: all 0.2s ease;
    }

    a:hover {
      color: black;
    }

    .line-through a {
      color: #888;
    }

    ul {
      padding: 2px;
      list-style: none;
    }

    li {
      padding-inline: 10px;
    }

    li span {
      flex: 1;
      word-break: break-word;
      padding-block: 4px;
    }

    textarea {
      flex: 1;
      padding: 12px 16px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-family: inherit;
      font-size: 16px;
      line-height: 1.25;
      resize: vertical;
      min-height: 44px;
      transition: all 0.2s ease;
    }

    textarea:focus {
      outline: none;
      border-color: #646464;
    }

    input[type="checkbox"] {
      width: 16px;
      height: 16px;
      margin-right: 12px;
      accent-color: #646464;
    }

    button {
      font-family: inherit;
      padding: 12px 16px;
      background: #343434;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 14px;
    }

    button:hover {
      background: #555555;
    }

    @media (max-width: 480px) {
      body {
        padding: 1rem;
        font-size: 14px;
      }

      .container {
        padding: 1rem;
      }

      .input-group {
        flex-direction: column;
      }

      button {
        font-size: 0.95rem;
      }
    }
  </style>
</head>

<body>
  <div class="container" x-data="todoApp()">
    <div class="input-group">
      <textarea x-model="newTask" @keydown.enter="handleEnterKey" placeholder="What needs to be done?" rows="1"
        x-ref="textarea"></textarea>
      <button @click="addTask">Add Task</button>
    </div>
    
    <div class="filter-controls">
      <button class="filter-btn" :class="{ 'active': currentFilter === 'all' }" @click="currentFilter = 'all'">All</button>
      <button class="filter-btn" :class="{ 'active': currentFilter === 'active' }" @click="currentFilter = 'active'">Active</button>
      <button class="filter-btn" :class="{ 'active': currentFilter === 'completed' }" @click="currentFilter = 'completed'">Complete</button>
    </div>

    <ul>
      <template x-for="task in filteredTasks" :key="task.id">
        <li class="task">
          <input type="checkbox" x-model="task.completed" />
          <span class="task-text" :class="{ 'line-through': task.completed }""
            x-html=" formatText(task.text)">
          </span>
          <button class="delete-btn" aria-label="Delete task" @click="deleteTask(task.id)">❌</button>
        </li>
      </template>
      <template x-if="filteredTasks.length === 0">
          <div class="empty-state">
              <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="10"></circle>
                  <line x1="12" y1="8" x2="12" y2="12"></line>
                  <line x1="12" y1="16" x2="12.01" y2="16"></line>
              </svg>
              <p x-text="currentFilter === 'all' ? 'No tasks yet. Add your first task!' : 
                              currentFilter === 'active' ? 'No active tasks. Good job!' : 
                              'No completed tasks yet. Get to work!'"></p>
          </div>
      </template>
    </ul>
  </div>
  <script>
    function todoApp() {
      return {
        newTask: "",
        tasks: [],
        currentFilter: 'all',
        // Auto-evaluate init() method
        init() {
          // Load saved tasks on initialization
          const savedTasks = localStorage.getItem("todoAppTasks");
          if (savedTasks) this.tasks = JSON.parse(savedTasks);

          // Save to localStorage automatically on any change
          this.$watch(
            "tasks",
            value => {
              localStorage.setItem("todoAppTasks", JSON.stringify(value));
            },
            { deep: true }
          );
        },
        handleEnterKey(event) {
          if (!event.shiftKey) {
            event.preventDefault()
            this.addTask()
          }
        },
        addTask() {
          const text = this.newTask.trim();
          if (!text) return;

          this.tasks.push({
            id: Date.now(),
            text: text,
            completed: false
          });
          this.newTask = "";
          this.$refs.textarea.style.height = 'auto' // Reset textarea height
        },
        deleteTask(taskId) {
          this.tasks = this.tasks.filter(task => task.id !== taskId);
        },
        get filteredTasks() {
            if (this.currentFilter === 'active') {
                return this.tasks.filter(task => !task.completed);
            } else if (this.currentFilter === 'completed') {
                return this.tasks.filter(task => task.completed);
            }
            return this.tasks;
        },
        formatText(text) {
          // URL detection and linking
          const urlRegex = /(https?:\/\/[^\s]+)/gi;
          return text.replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .split('\n') // Split text into lines
            .map(line => {
              // Convert lines starting with "- " to list items
              if (line.match(/^\s*-\s/)) {
                const content = line.replace(/^\s*-\s/, '')
                  .replace(urlRegex, url =>
                    `<a href="${url}" class="task-link" target="_blank" rel="noopener">${url}</a>`
                  );
                return `<li>${content}</li>`;
              }
              // Handle non-list lines
              return line.replace(urlRegex, url =>
                `<a href="${url}" class="task-link" target="_blank" rel="noopener">${url}</a>`
              ) + '<br>';
            })
            .join('')
            .replace(/(<li>.*?<\/li>)+/g, listItems =>
              `<ul>${listItems}</ul>`
            );
        }
      };
    }
  </script>
</body>

</html>